{layout name="layout" /}
<style>
    .pagination{padding:0;}
</style>
<header class="article-header" style="padding-top:0px;padding-bottom: 15px;">
    <h1 class="article-title">博文分类列表</h1>
</header>
<div class="table-responsive">
    <a href="{:url('blog/Blogcate/add')}" class="btn btn-danger">添加分类</a>
    <table class="table table-bordered table-hover">
        <tr>
            <td class="">ID</td>
            <td class="">分类名称</td>
            <td class="" style="width: 85px;">排序</td>
            <td class="">操作</td>
        </tr>
        {volist name="list" id="vo"}

        <tr>
            <td class="">{$vo.cid}</td>
            <td class="">{$vo.name}</td>
            <td class="">
                <input type="text" data="{$vo.cid}" value="{$vo.sort}" olddata="{$vo.sort}" class="form-control inputsort" style="width: 80px;">
            </td>
            <td class=""><a href="{:url('blog/Blogcate/edit',['cid'=>$vo.cid])}" class="btn btn-danger btn-xs btn-edit"><i class="glyphicon glyphicon-edit"></i> 编辑</a> <a href="javascript:;" data="{$vo.cid}" class="btn btn-info btn-xs del"><i class="glyphicon glyphicon-trash"></i> 删除</a></td>
        </tr>
        {/volist}
    </table>
    <nav aria-label="...">
        {$list->render()}
    </nav>
</div>
<script>
    $('.btn-edit').on('click',function () {
        var url=this.href;
        layer.open({
            type: 2,
            title: '栏目编辑',
            shadeClose: true,
            shade: 0.8,
            area: ['380px', '75%'],
            content: url //iframe的url
        });
        return false;
    });
    //分类删除
    $(".del").on('click',function(){
        //this和$(this)的区别
        //获取栏目ID
        var cid=$(this).attr("data");
        //询问框
        layer.confirm('确定要删除吗？', {
            btn: ['删除','取消'] //按钮
        }, function(){
            $.ajax({
                type:"post",
                url:"{:url('blog/Blogcate/del')}",
                data:{id:cid},
                dataType:"json",
                success:function(res){
                    if(res.code==1){
                        layer.msg(res.msg,function(){
                            location.reload();
                        });
                    }else{
                        layer.msg(res.msg);
                    }
                }
            })
        }, function(){
        });
    })
    //排序
    $(".inputsort").blur(function () {
        var cid=$(this).attr("data");
        var sort=$(this).val();
        var oldsort=$(this).attr("olddata");
        if(sort==oldsort){
            return;
        }
        $.ajax({
            type:"post",
            url:"{:url('blog/Blogcate/setsort')}",
            data:{id:cid,sort:sort},
            dataType:"json",
            success:function(res){
                if(res.code==1){
                    layer.msg(res.msg,function(){
                        location.reload();
                    });
                }else{
                    layer.msg(res.msg);
                }
            }
        })
    });
</script>